<!-- 导航开始 -->
<nav
  class="bg-white z-50 dark:bg-zinc-900 fixed w-full top-0 start-0"
  id="nav-box"
>
  <div
    class=" flex flex-wrap items-center justify-between mx-auto max-lg:px-0"
  >
    <!-- 移动端下级菜单开始 -->
    <button
      data-collapse-toggle="mega-menu-full"
      id="mobile-btn"
      type="button"
      class="ml-4 inline-flex text-gray-800 dark:text-white items-center py-4 justify-center text-sm rounded-lg lg:hidden"
      aria-controls="navbar-sticky"
      aria-expanded="false"
    >
      <span class="sr-only">Open main menu</span>
      <svg
        class="w-4 h-4"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 17 14"
      >
        <path
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M1 1h15M1 7h15M1 13h15"></path>
      </svg>
    </button>
    <!-- 移动端下级菜单结束 -->
    <!-- logo开始 -->
    <a
      href="https://flowbite.com/"
      class="flex items-center space-x-3 rtl:space-x-reverse"
    >
      <img
        src="https://flowbite.com/docs/images/logo.svg"
        class="h-8"
        alt="Flowbite Logo"
      />
      <span
        class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
        >Flowbite</span
      >
    </a>
    <!-- logo结束 -->

    <!-- 工具栏开始 -->
    <div
      class="flex lg:order-2 py-4 space-x-3 lg:space-x-0 rtl:space-x-reverse"
    >
      <!-- 用户按钮开始 -->
      <button
        type="button"
        class="text-white font-medium rounded-lg text-sm text-center"
      >
        <svg
          class="w-7 h-7 text-gray-800 dark:text-white"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="none"
          viewBox="0 0 24 24"
        >
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 0a8.949 8.949 0 0 0 4.951-1.488A3.987 3.987 0 0 0 13 16h-2a3.987 3.987 0 0 0-3.951 3.512A8.948 8.948 0 0 0 12 21Zm3-11a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
          >
          </path>
        </svg></button
      >
      <!-- 用户按钮 -->

      <!-- 移动端侧边按钮开始 -->
      <button
        type="button"
        id="mobile-aside-btn"
        class="lg:hidden font-medium rounded-lg text-sm text-center pr-4"
      >
        <svg
          class="w-7 h-7 text-gray-800 dark:text-white"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            fill-rule="evenodd"
            d="M5 6a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm0 12a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm3.85-9.76A1 1 0 0 1 10.5 9v6a1 1 0 0 1-1.65.76l-3.5-3a1 1 0 0 1 0-1.52l3.5-3ZM12 10a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Z"
            clip-rule="evenodd"></path>
        </svg>
      </button>
      <!-- 移动端侧边按钮结束 -->
    </div>
    <!-- 工具栏结束 -->

    <!-- 菜单开始 -->
    <div
      id="mega-menu-full"
      class="items-center justify-between font-medium hidden w-full lg:flex lg:w-auto lg:order-1"
    >
      <ul
        th:with="menu=${@columnTag.getColumnTreeById(43)}"
        class="flex max-lg:h-screen flex-col p-4 lg:p-0 max-lg:mt-0 rounded-lg lg:space-x-8 rtl:space-x-reverse lg:flex-row lg:mt-0 lg:border-0 dark:border-gray-700"
      >
        <li class="py-4 max-lg:py-0">
          <a
            href="#"
            class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:p-0 dark:text-white dark:hover:bg-gray-700 lg:dark:hover:bg-transparent dark:border-gray-700"
            aria-current="page">首页</a
          >
        </li>
        <li
          class="menu-dropdown group py-4 max-lg:py-0"
          data-toggle="mega-menu-full-dropdown-1"
        >
          <button
            class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded lg:w-auto hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-600 lg:p-0 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700"
            >Company
            <svg
              class="w-2.5 h-2.5 ms-2.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 10 6"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="m1 1 4 4 4-4"></path>
            </svg></button
          >
          <div
            id="mega-menu-full-dropdown-1"
            class="mega-menu-full-dropdown lg:group-hover:block mt-4 max-lg:mt-0 absolute left-0 w-screen rounded-lg bg-white dark:bg-gray-800 max-lg:min-h-screen max-lg:fixed max-lg:top-16 shadow-sm hidden"
          >
            <div
              class="grid  mx-auto rounded-lg dark:bg-gray-800 dark:border-gray-600 text-gray-900 dark:text-white sm:grid-cols-2 max-lg:mx-4"
            >
              <button
                class="lg:hidden pt-2 px-2 col-start-1 col-end-7 text-left" id="mega-menu-full-dropdown-1-close"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-6 h-6"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18"></path>
                </svg>
              </button>
              <ul>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Segmentation</div>
                    <span class="text-sm text-gray-500 dark:text-gray-400"
                      >Connect with third-party tools that you're already using.</span
                    >
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Marketing CRM</div>
                    <span class="text-sm text-gray-500 dark:text-gray-400"
                      >Connect with third-party tools that you're already using.</span
                    >
                  </a>
                </li>
              </ul>
              <ul>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Online Stores</div>
                    <span class="text-sm text-gray-500 dark:text-gray-400"
                      >Connect with third-party tools that you're already using.</span
                    >
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Segmentation</div>
                    <span class="text-sm text-gray-500 dark:text-gray-400"
                      >Connect with third-party tools that you're already using.</span
                    >
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Marketing CRM</div>
                    <span class="text-sm text-gray-500 dark:text-gray-400"
                      >Connect with third-party tools that you're already using.</span
                    >
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li
          class="menu-dropdown group py-4 max-lg:py-0"
          data-toggle="mega-menu-full-dropdown-2"
        >
          <button
            class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded lg:w-auto hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-600 lg:p-0 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700"
            >Company
            <svg
              class="w-2.5 h-2.5 ms-2.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 10 6"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="m1 1 4 4 4-4"></path>
            </svg></button
          >

          <div
            id="mega-menu-full-dropdown-2"
            class="mega-menu-full-dropdown lg:group-hover:block mt-4 max-lg:mt-0 absolute left-0 w-screen rounded-lg shadow-lg bg-white dark:bg-gray-800 max-lg:min-h-screen max-lg:fixed max-lg:top-16 hidden"
          >
            <div
              class="grid  mx-auto dark:bg-gray-800 dark:border-gray-600 text-gray-900 dark:text-white sm:grid-cols-2 max-lg:mx-4"
            >
              <ul>
                <li
                  class="lg:hidden pt-4 px-2"
                  id="mega-menu-full-dropdown-2-close"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-6 h-6"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18"></path>
                  </svg>
                </li>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Segmentation不宜天涯</div>
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Marketing CRM</div>
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Marketing CRM</div>
                  </a>
                </li>
              </ul>

              <ul>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Online Stores</div>
                    <span class="text-sm text-gray-500 dark:text-gray-400"
                      >Connect with third-party tools that you're already using.</span
                    >
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Segmentation</div>
                    <span class="text-sm text-gray-500 dark:text-gray-400"
                      >Connect with third-party tools that you're already using.</span
                    >
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <div class="font-semibold">Marketing CRM</div>
                    <span class="text-sm text-gray-500 dark:text-gray-400"
                      >Connect with third-party tools that you're already using.</span
                    >
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li
          class="menu-dropdown group py-4 max-lg:py-0"
          data-toggle="mega-menu-full-dropdown-3"
        >
          <button
            class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded lg:w-auto hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-600 lg:p-0 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700"
            >Comdddd
            <svg
              class="w-2.5 h-2.5 ms-2.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 10 6"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="m1 1 4 4 4-4"></path>
            </svg></button
          >

          <div
            id="mega-menu-full-dropdown-3"
            class="mega-menu-full-dropdown lg:group-hover:block mt-4 max-lg:mt-0 absolute left-0 w-screen rounded-lg shadow-lg bg-white dark:bg-gray-800 max-lg:min-h-screen max-lg:fixed max-lg:top-16 hidden"
          >
            <div class="container max-lg:mx-4">
              <div
                class="grid grid-cols-2 mt-4 gap-x-4 md:grid-flow-row-dense md:text-left max-lg:grid-cols-1 max-lg:text-left"
              >
                <div
                  class="flex flex-col max-lg:flex-row items-end max-lg:items-left"
                >
                  <div>
                    <h2
                      class="mb-4 text-lg font-semibold text-gray-900 dark:text-white"
                    >
                      Password requirements:
                    </h2>
                    <ul
                      class="text-gray-500 list-none list-inside dark:text-gray-400"
                    >
                      <li>At least 10 characters (and up to 100 characters)</li>
                      <li>At least one lowercase character</li>
                      <li>
                        Inclusion of at least one special character, e.g., ! @ #
                        ?
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="flex flex-wrap justify-left">
                  <!-- 右侧横向排列的 div 元素 -->
                  <div class="w-full">
                    <h2
                      class="mb-4 max-lg:mt-4 text-lg font-semibold text-gray-900 dark:text-white"
                    >
                      Password requirements:
                    </h2>
                  </div>
                  <div class="w-48 h-40 mb-4 bg-fuchsia-900">Div 2</div>
                  <div class="w-48 h-40 mb-4 bg-zinc-600">Div 1</div>
                  <div class="w-48 h-40 mb-4 bg-fuchsia-900">Div 2</div>
                  <div class="w-48 h-40 mb-4 bg-zinc-600">Div 1</div>
                  <div class="w-48 h-40 mb-4 bg-fuchsia-900">Div 2</div>
                  <div class="w-48 h-40 mb-4 bg-zinc-600">Div 1</div>
                  <div class="w-48 h-40 mb-4 bg-fuchsia-900">Div 2</div>
                  <!-- 更多 div 元素... -->
                </div>
              </div>
            </div>
          </div>
        </li>

        <li class="py-4 max-lg:py-0">
          <a
            href="#"
            class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-blue-700 lg:p-0 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700"
            >Marketplace</a
          >
        </li>
        <li class="py-4 max-lg:py-0">
          <a
            href="#"
            class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-blue-700 lg:p-0 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700"
            >Resources</a
          >
        </li>
        <li class="py-4 max-lg:py-0">
          <a
            href="#"
            class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-blue-700 lg:p-0 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700"
            >Contact</a
          >
        </li>
      </ul>
    </div>
    <!-- 菜单结束 -->
  </div>
</nav>
<!-- 导航结束 -->

<script>
  import { Collapse } from "flowbite";

  // 获取菜单节点下所有的下拉条
  let navBox = document.querySelector("#nav-box");
  if (navBox) {
    let dropdowns = navBox.querySelectorAll(".menu-dropdown");
    for (let i = 0; i < dropdowns.length; i++) {
      let dropdownTrag = dropdowns[i].getAttribute("data-toggle");
      //触摸点击显示下拉菜单
      dropdowns[i].addEventListener(
        "touchstart",
        function (event) {
          document
            .querySelector("#" + dropdownTrag)
            ?.classList.remove("hidden");
        },
        false
      );
      //点击关闭按钮关闭下拉菜单
      document
        .querySelector("#" + dropdownTrag + "-close")
        ?.addEventListener("touchstart", function (event) {
          setTimeout(function () {
            document.querySelector("#" + dropdownTrag)?.classList.add("hidden");
          }, 100);
        });
    }
  }

  let menuBtn = navBox!.querySelector("#mobile-btn");
  // 移动端导航button是否点击状态
  var menuBtnStatus = false;
  menuBtn!.addEventListener("click", function () {
    menuBtnStatus = !menuBtnStatus;
    if (!menuBtnStatus) {
      const ds = document.querySelectorAll(".mega-menu-full-dropdown");
      ds.forEach(function (item) {
        item.classList.add("hidden");
      });
    }
  });

  const y = document.getElementById("right-box-fixed");
  const nl = document.getElementById("#mobile-aside-btn");
  nl!.addEventListener("click", function () {
    if (y) {
      if (!y.classList.contains("max-lg:hidden")) {
        y.classList.add("max-lg:hidden");
        y.style.top = "14px";
      } else {
        y.classList.remove("max-lg:hidden");
        y.style.top = "60px";
      }
    }
  });
</script>
